<template>
	<view class="warp">
		<!-- 自定义状态栏 -->
		<custom-status-bar gradient-type="default"></custom-status-bar>
		
		<view class="header">
			<text class="header-title">首页</text>
		</view>
		
		<!--上方公告轮播图 -->
		<unicloud-db ref="bannerdb" v-slot:default="{data, loading, error, options}" collection="opendb-banner"
			field="_id,bannerfile,open_url,title" @load="onqueryload" >
			<!-- 当无banner数据时显示占位图 -->
			<image v-if="!(loading||data.length)" class="banner-image" src="/static/uni-center/headers.png" mode="aspectFill" :draggable="false" />
			<swiper v-else class="swiper-box"  @change="changeSwiper" :current="current" indicator-dots>
				<swiper-item v-for="(item, index) in data" :key="item._id">
					<view class="banner-container">
						<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" @click="clickBannerItem(item)" :draggable="false" />
						<!-- 图片标题 -->
						<view class="banner-title" v-if="item.title">{{ item.title }}</view>
					</view>
				</swiper-item>
			</swiper>
		</unicloud-db>
		
		<!-- 公告消息 -->
		<view class="notice-box">
			<h4 id="notice-h4">欢迎使用智能校园二手书交易助手！</h4>
		</view>
		<!--瀑布流-->
			<waterfallsFlow :list="fallList" @wapper-lick="clickWaterfallItem">
			    <template v-slot:default="item">
			      <!-- 此处添加插槽内容 -->
					<view class="cnt">
			          <view class="title">{{item.title}}</view>
			          <view class="text">{{item.text}}</view>
			        </view>
			    </template>
			  </waterfallsFlow>
		</view>
		<!-- 网页视图容器 -->
		<view v-if="showWebView" class="webview-container">
			<view class="webview-header">
				<view class="back-button" @click="backToHome">返回</view>
				<text class="webview-title">{{ webviewTitle }}</text>
				<view class="close-button" @click="closeWebView">关闭</view>
			</view>
			<web-view :src="webviewUrl"></web-view>
		</view>
	
</template>

<script>
	// #ifdef APP
	import customStatusBar from "@/components/custom-status-bar/custom-status-bar.vue";
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	import fallList from "./homePosts.json"
	// #endif
	export default {
		// #ifdef APP
		components: {
			customStatusBar,
			waterfallsFlow
		},
		// #endif
		data() {
			return {
				bannerList:[],
				hasLogin: false,
				fallList,
				current: 0,
				showWebView: false,
				webviewUrl: '',
				webviewTitle: ''
			}
		},
		onShow() {
			// 保留登录状态判断的基本功能
			this.hasLogin = uniCloud.getCurrentUserInfo().tokenExpired > Date.now()
		},
		onLoad() {
			// 初始化生命周期钩子
			//获取banner
			
		},
		// 添加监听页面返回事件
		onBackPress() {
			if (this.showWebView) {
				this.backToHome();
				return true; // 阻止默认返回行为
			}
			return false; // 使用默认返回行为
		},
		methods: {
			clickBannerItem() {
					console.log("点击了");
					
				
			},
			onqueryload(data, ended, pagination) {
				this.bannerList = data
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickWaterfallItem(item) {
				console.log("点击");
				console.log(item.url);
				// 在应用内打开外部网页
				// uni.navigateTo({
				// 	url: `/pages/webview/webview?url=${encodeURIComponent(item.url)}&title=${encodeURIComponent(item.title)}`
				// });
				this.webviewUrl = item.url;
				this.webviewTitle = item.title;
				this.showWebView = true;
			},
			closeWebView() {
				this.showWebView = false;
				this.webviewUrl = '';
				this.webviewTitle = '';
			},
			backToHome() {
				this.showWebView = false;
				this.webviewUrl = '';
				this.webviewTitle = '';
				uni.switchTab({
					url: '/pages/home/home'
				});
			}
		}
	}
</script>

<style lang="css" src="./home_css.css" scoped >
/* 添加渐变背景色 */
.warp {
	background: linear-gradient(135deg, #CFDEF3 0%, #E0EAFC 100%);
	min-height: 100vh;
}

.webview-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 999;
}

.webview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #e0e0e0;
	position: relative;
}

.webview-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.close-button {
	padding: 5px 10px;
	background-color: #007AFF;
	color: white;
	border-radius: 4px;
	font-size: 14px;
}

.back-button {
	position: absolute;
	top: 10rpx;
	left: 50rpx;
	padding: 5px 10px;
	background-color: #007AFF;
	color: white;
	border-radius: 4px;
	font-size: 14px;
	margin-right: 10px;
}
</style>